import FyComponent from '@/components/common/navbar'
import { View } from '@tarojs/components'
import './index.scss'

interface IProps {
  title?: any
  isBar?: boolean
  isTitle?: boolean
}

export default class NavBar extends FyComponent<IProps, {}> {
  state: any
  props: any

  render() {
    const { isTitle, isBar } = this.props
    const { capsule, navBarHeight } = this.state
    const width = (capsule.width - 1) / 2
    return (<View className='custom_nav' style={`height: ${navBarHeight}px;`}>
      <View className='custom_nav_bar' style={`top: ${capsule.top}px;left: calc(100% - ${capsule.right}px);width: calc(${capsule.right}px - (100% - ${capsule.right}px));height: ${capsule.height}px;`}>
        {!isBar &&
        <View className='bar-left d-f' style={`width: calc(100% - ${capsule.width}px);height: ${capsule.height}px;`}>
          <View className='bar-capsule d-f'>
            <View className='bnn-icon icon d-f a-i-c j-c-c' style={`width: ${width}px;height: ${capsule.height}px;`} hoverClass='capsule-hover' hoverStartTime={0} hoverStayTime={0} onClick={this.onNavigateBack.bind(this)}>&#xe7e0;</View>
            <View className='vertical-line d-f a-i-c j-c-c'><View className='line v-line' /></View>
            <View className='bnn-icon icon d-f a-i-c j-c-c' style={`width: ${width}px;height: ${capsule.height}px;`} hoverClass='capsule-hover' hoverStartTime={0} hoverStayTime={0} onClick={this.onNavigateHome.bind(this)}>&#xe6a5;</View>
          </View>
          {isTitle && <View className='bar-title d-f a-i-c j-c-c' style={`height: ${capsule.height}px;`}>{this.props.children}</View>}
        </View>}
        {isBar && <View className='bar-left d-f' style={`width: calc(100% - ${capsule.width}px);height: ${capsule.height}px;`}>{this.props.children}</View>}
      </View>
    </View>)
  }
}
